<template>
	<view class="input-select-start">
		<uni-combox v-model="val" @input='querySearchAsync' :candidates="selectOptions" placeholder="中文" @select='select'
		 value='senderName'></uni-combox>
		<u-icon name='close-circle' :size='40' @click="clear"></u-icon>
	</view>
</template>

<script>
	import UniCombox from '@/components/uni-combox/uni-combox.vue'

	export default {
		name: "InputSelectStart",
		components: {
			UniCombox
		},
		props: {
			value: {
				type: String
			},
			that: {
				type: Object
			}
		},
		data() {
			return {
				val: '',
				selectOptions: []
			}
		},
		watch: {
			value(val, old) {
				if (val && !old) { // 第一次输入执行
					this.val = val;
				}
				if (!val && this.val) { // 只有外边清空才执行
					this.val = '';
				}
			}
		},
		methods: {
			clear() {
				let _this = this.that;
				_this.form.senderName = ''; // 寄件人姓名
				_this.form.laosSenderName = '';
				_this.form.enSenderName = '';
				_this.form.senderCompanyName = ''; // 寄件单位名称
				_this.form.laosSenderCompanyName = '';
				_this.form.senderAddress = ''; // 寄件人详细地址
				_this.form.laosSenderAddress = '';
				_this.form.enSenderAddress = '';
				_this.form.senderPhone = ''; // 寄件人联系电话
				_this.form.senderId = ''; // 寄件人证件号
				_this.form.senderCity = ''; // 发件人城市
				_this.form.enSenderCity = '';
			},
			set(obj) {
				let _this = this.that;
				_this.form.senderName = obj.senderName; // 寄件人姓名
				_this.form.laosSenderName = obj.laosSenderName;
				_this.form.enSenderName = obj.enSenderName;
				_this.form.senderCompanyName = obj.senderCompanyName; // 寄件单位名称
				_this.form.laosSenderCompanyName = obj.laosSenderCompanyName;
				_this.form.senderAddress = obj.senderAddress; // 寄件人详细地址
				_this.form.laosSenderAddress = obj.laosSenderAddress;
				_this.form.enSenderAddress = obj.enSenderAddress;
				_this.form.senderPhone = obj.senderPhone; // 寄件人联系电话
				_this.form.senderId = obj.senderId; // 寄件人证件号
				_this.form.senderCity = obj.senderCity; // 发件人城市
				_this.form.enSenderCity = obj.enSenderCity;
			},
			translate() { // 翻译
				let _this = this.that;
				_this.translateZhToEn(this.val, 'laosSenderName', 'enSenderName'); // 寄件人姓名
			},
			select(val) { // 点击选择
				this.val = val.senderName;
				this.$emit('input', val.senderName);
				this.$parent.$emit('el.form.change');
				this.set(val);
				this.selectOptions = [];
				this.translate();
			},
			querySearchAsync(query) {
				setTimeout(() => {
					this.$emit('input', query);
					this.$parent.$emit('el.form.change');
					if (!query) { // 无参数
						this.selectOptions = []
						return
					}
					let data = {
						senderName: query,
						receiverName: ''
					};
					this.$api.listByNameApi(data).then(result => {
						result.resultParam.expressOrderList.forEach(item => {
							item.label = item.senderName + " --- " + item.senderPhone
							item.value = item.senderName
						})
						/* 去重 */
						let arr = result.resultParam.expressOrderList
						for (let i = 0; i < arr.length; i++) {
							for (let j = i + 1; j < arr.length; j++) {
								if (arr[i].senderName === arr[j].senderName && arr[i].senderPhone === arr[j].senderPhone) {
									arr.splice(j, 1);
									j--;
								}
							}
						}
						/* 去重 */
						this.selectOptions = arr
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.input-select-start {
		display: flex;
	}
</style>
